

<!--签约方管理=> 开户行信息表 -->
<template >
    <div>
        <p class="type-item-title">开户行信息</p>
        <p v-if="!tableReadonly"><el-button  type="primary"  @click="openFormModal('add')">新增</el-button></p>
        <table-list 
            :tableData='tableData'
            :tableLabels='accounTableLabels'
            :tableProps='accounTableProps'
            :tableChangeBtns='accounTableChangeBtns'
            :tableReadonly="tableReadonly"
            >
        </table-list>
        <a-modal
        :type='accounType' 
        :editform="updateAccounForm" 
        :visible.sync='accountVisible' 
        @onSave='editAccoun'></a-modal>
    </div>
</template>
       

<script>
import api from '@/api/apiPath'
import tableList from './tableList'
import accounModal from './accounModal'
export default {
    components: {
        'table-list':tableList,
        'a-modal':accounModal,
    },
	data () {
		return {
            //开户行信息
            tableData:[],
            accounTableChangeBtns:[//开户行操作按钮
                {label:"编辑",type:'edit',fn:this.openFormModal},
                {label:"删除",type:'dele',fn:this.deleteAccoun}
            ],
            //开户行prop,//开户行表表头
            accounTableProps:['openingBank','bankName','bankAccount' ,'bankNumber','bankAreaCode' ,'openingBankProvince','openingBankCity','typeName'    ,'apply' ,'operateName' ,'operateTime','changeBtn'],
            accounTableLabels:['开户行'     ,'开户名称'  ,'开户账号'     ,'联行号'     ,'地区代码信息'   ,'开户行所属省'         ,'开户行所属市'     ,'账户类别' ,'用途'   ,'更新人'      ,'更新时间'   ,'操作'],
            accountVisible:false,//开户行编辑框开关 
            accounType:'add',//开户行编辑状态
            accounEditIdx:0,//开户行当前编辑下标
            updateAccounForm:null,//开户行当前编辑数据
            tableReadonly:false,//表格是否为只读状态
        }
    },
    methods:{
        //新增编辑开户行信息
        openFormModal(type,idx){
            //记录当前需要编辑的数据
            if(type == 'edit')this.updateAccounForm = JSON.parse(JSON.stringify(this.tableData[idx]));
            this.accountVisible = true;
            //当前事件的状态
            this.accounType = type;
            //当前编辑数据下标
            this.accounEditIdx = idx;
            
        },
    
        //删除开户行信息
        deleteAccoun(type,idx){
            this.$confirm(`确定要删除开户行记录吗？`, '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.tableData.splice(idx,1);
                this.$message({
                    type: 'info',
                    message: '已删除',
                });
            }).catch(() => {
                
            });
            
        },
         //格式化数据
        formatList(data){
            let typeList = ['','支出类','收入类'];
            let {type,typeName} = data;
            if(this.typeStatus == 'add'){
               data.type = typeList.indexOf(typeName);
            }else{
                data.typeName = typeList[type];
            }
            return data;
        },
        //解格式化数据
        unFormatList(data){
            let typeList = ['','支出类','收入类'];
            let {typeName} = data;
            data.type = typeList.indexOf(typeName);
            delete data.typeName;
            return data;
        },
        //加载开户行表（只在编辑和查看时使用）
        loadAccountList(){
            let params={
                contractUndersignType:this.typeId,
                insideId:this.insideId,
            }
            this.axios.post(api.INITBANKLIST,params).then(res => {
                if (res.data.code == 200) {
                    let lists = res.data.data;
                    lists.forEach(item=>{
                        item = this.formatList(item);
                    });
                    this.tableData = lists;
                }
            })
        },
        //删除单条开户行
        deleteAccoun(type,idx){
            let thisList = this.tableData[idx];
            this.$confirm(`确定要删除开户行记录吗？`, '', {center:true,confirmButtonText: '确定', cancelButtonText: '取消'}).then(() => {
                if(this.typeStatus == 'edit'){
                    let id = thisList.id; 
                    let params = {
                        contractUndersignType:this.typeId,
                        insideId:this.insideId,
                        id:id
                    }
                    this.axios.post(api.DELETEBACKLIST,params).then(res => {
                         if (res.data.code == 200) {
                            this.loadAccountList();
                            this.$message({
                                type: 'success',
                                message: '已删除',
                            });
                        }
                    })
                }else{
                    this.tableData.splice(idx,1);
                    this.$message({
                        type: 'success',
                        message: '已删除',
                    });
                }
            }).catch(() => {
                
            });
        },
        //添加/编辑单条开户行
        //(如果是新建管理列表状体下，只做本地数据更改）
        editAccoun(form){
           
            if(this.typeStatus == 'edit'){
                let thisApi = {
                    edit:api.EDITBACKLIST,
                    add:api.ADDBACKLIST
                };
                let doneMess = {edit:'编辑成功',add:'添加成功'};
                let params = {
                    contractUndersignType:this.typeId,
                    insideId:this.insideId,
                    input:this.unFormatList(form)
                }
                if(this.accounType == 'edit') params.id = this.tableData[this.accounEditIdx].id;
                this.axios.post(thisApi[this.accounType],params).then(res => {
                    if (res.data.code == 200) {
                        this.loadAccountList();
                        this.$message({
                            type: 'success',
                            message: doneMess[this.accounType],
                        });
                    }
                })
            }else{
                form = this.formatList(form)
                if(this.accounType == 'add'){
                    this.tableData.push(form)
                }else{
                    this.$set(this.tableData , this.accounEditIdx, form)
                }
            }
        },
        returnTabel(){
            let newTabelList = JSON.parse(JSON.stringify(this.tableData));
            newTabelList.forEach(data=>{
                data = this.unFormatList(data);
            })
            return newTabelList;
        }
	
    },
    props:[
        'typeStatus',//当前签约方类型列表状态[add,edit]
        'insideId',//当前签约方类型列表id
        'typeId' //当前签约方类型id
    ],

	created () {
        //页面状态，新增无变化，编辑与查看请求开户行数据
        //查看状态时设置表格为只读状态
        switch(this.typeStatus){
            case 'add':
                this.tableReadonly=false;
                break;
            case 'edit':
                this.tableReadonly=false;
                this.loadAccountList();
                break;
            case 'view':
                this.tableReadonly=true;
                this.loadAccountList();
                break;
        }
    },
	destroyed() {
		
	},
	filters: {

	}
}

</script>

<style lang="stylus" scoped>
 

</style>
